<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<meta name="referrer" content="never">
<link rel="shortcut icon" href="Bad egg Smile.ico" />
<link rel="stylesheet" href="../css/normalize.css">
<!-- 引入bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- 公共样式 -->
<link rel="stylesheet" href="../css/common.css">
<!-- 当前文件的css -->
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/swiper-bundle.min.css">
<!-- 引入js的库 -->
<script src="../lib/jquery.min.js"></script>
<!-- 引入bootstrap.js，bootstrap的js需要依赖一个js库 -->
<script src="../lib/bootstrap.js"></script>
</head>
<body>
<!-- 顶部 -->
<div class="wrap navbar-default">
    <div class="content">
        <nav class="navbar">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo" href="index.html">
                        <img src="../static/images/Bad egg Smile.jpg" alt="">
                    </a>
                </div>
            
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="list.html">列表页 </a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search" id="inp">
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                    </ul>
                    <!-- 登陆注册 -->
                    <ul class="nav navbar-nav navbar-right login"> 
                        <li><a href="">购物车</a></li>
                        <li><a href="login.html">登陆</a></li>
                        <li><a href="register.html">注册</a></li>
                        
                    </ul>
                    
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
</div>
<!-- 轮播图 -->
<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }

    .banner {
      /* width: 500px;
      height: 300px; */
      width: 1200px;
        height:500px;
      border: 5px solid #ccc;
      position: relative;
      margin: 1px auto;
      overflow: hidden;
    }

    .banner1 img {
      /* width: 500px;
      height: 300px; */
      width: 1200px;
        height:600px;
    }

    .banner1 {
      /* width: 2500px; */
      /* height: 300px;       */
        height:600px;
      position: absolute;
    }

    .banner1>li {
      /* width: 500px;
      height: 300px; */
      width: 1200px;
        height:600px;
      /* display: none; */
      float: left;
    }

    .banner1>li.current {
      display: block;
    }

    .banner>a {
      width: 20px;
      height: 40px;
      background-color: #666;
      opacity: .5;
      display: block;
      color: #fff;
      text-align: center;
      line-height: 40px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .banner>a.left {
      left: 0;
    }

    .banner>a.right {
      right: 0;
    }

    ol {
      width: 100px;
      height: 20px;
      background-color: #fff;
      opacity: .7;
      border-radius: 10px;
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    ol>li {
      width: 10px;
      height: 10px;
      background-color: red;
      border-radius: 50%;
      cursor: pointer;
    }

    ol>li.active {
      background-color: cyan;
    }
  </style>
<div class="banner">
    <ul class="banner1">
      <li class="current"><a href="javascript:;"><img src="./images/fj1.jpg"></a></li>
      <li><a href="javascript:;"><img src="./images/fj2.jpg"></a></li>
      <li><a href="javascript:;"><img src="./images/fj3.jpg"></a></li>
    </ul>
    <ol>
      <li class="active"></li>
      <li></li>
      <li></li>
    </ol>
    <a href="javascript:;" class="left">&lt;</a>
    <a href="javascript:;" class="right">&gt;</a>
  </div>
  <script src="../lib/move.js"></script>
  <script>
    let onOff = true; // 设置运动开关，如果运动开始为false则说明上次运动还没结束，则点击了也不能开始此次运动
    // 1. 获取要操作的元素
    let banner = document.querySelector('.banner');
    let ul = document.querySelector('.banner1');
    let ulis = document.querySelectorAll('.banner1>li');
    let olis = document.querySelectorAll('ol>li');
    let prve = document.querySelector('.left');
    let next = document.querySelector('.right');
  
    // 1.1 克隆复制第一张和最后一张图片的li，并放到最后和最前面
    function setUi() {
      // 克隆第一张和最后一张图片的li
      let firstLi = ulis[0].cloneNode(true);
      let lastLi = ulis[2].cloneNode(true);
      // 将克隆的li放到最前面和最后面
      ul.appendChild(firstLi);
      ul.insertBefore(lastLi, ulis[0]);
      // 重新获取一下ulis
      ulis = document.querySelectorAll('.banner1>li');
      // 给ul设置宽度
      ul.style.width = ulis.length * ulis[0].offsetWidth + 'px';
      // 设置ul的初始left属性(显示图片1)
      ul.style.left = -ulis[0].offsetWidth + 'px'
      // 重新获取ul
      ul = document.querySelector('.banner1')
    }
    setUi();
  
  
    // 2. 实现自动轮播:(通过定时器显示自动轮播)
    let n = 1; // 要显示的图片li的索引
    let timer = setInterval(() => {
      if (!onOff) return;
      onOff = false;
      n++; // 索引n+1显示下一张图
      // 调用运动函数
      play();
    }, 5000)
  
    // 3. 鼠标移入移出轮播暂停和开始
    banner.onmouseenter = () => clearInterval(timer); // 鼠标移入关闭定时器
    banner.onmouseleave = () => { // 鼠标移入关闭定时器
      if (!onOff) return;
      onOff = false;
      n++;
      play()
      timer = setInterval(() => {
        if (!onOff) return;
        onOff = false;
        n++; // 索引n+1显示下一张图
        play()
      }, 5000)
    }
  
    // 4. 实现点击上一张下一张
    prve.onclick = () => {
      if (!onOff) return;
      onOff = false;
      n--;
      play();
    }
    next.onclick = () => {
      if (!onOff) return;
      onOff = false;
      n++;
      play();
    }
  
    // 5. 点击小圆点实现切换图片
    // 遍历olis。给每一个小圆点绑定点击事件
    for (let i = 0; i < olis.length; i++) {
      olis[i].onclick = function () { // 此时的i需要加1，才是显示图片的索引
        if (!onOff) return;
        onOff = false;
        n = i + 1;
        play();
      }
    }
  
    // 封装一个轮播图片和圆点高亮显示的函数
    function play() {
      // 调用运动函数
      move(ul, {
        left: -n * ulis[0].offsetWidth
      }, function () {
        // console.log(123);
        // 如果n = 3,则此时显示的应该是第一张图片li
        if (n == 4) {
          n = 1;
        }
        if (n == 0) { // 如果索引为0这上次显示的是图片1，此时需要显示图片3
          n = 3;
        }
        ul.style.left = -n * ulis[0].offsetWidth + 'px';
        // 小圆点跟随高亮显示
        for (let i = 0; i < olis.length; i++) {
          olis[i].className = '';
        }
        olis[n - 1].className = 'active';
        // 运动结束则将开关打开
        onOff = true;
      })
    }
  
  </script>
  <link rel="stylesheet" href="../css/swiper-bundle.min.css">

  <!-- Demo styles -->
  <style>
    html, body {
      position: relative;
      height: 60%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
  .swiper-slide img{
    width: 100%;
    height: 100%;
    border: 5px solid #666;
    display:block ;
  }
  </style>

  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./images/1 - 副本.jpg" alt="" ></div>
      <div class="swiper-slide"><img src="./images/2 - 副本.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/3 - 副本.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
      <div class="swiper-slide"><img src="./images/5.jpg" alt=""></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="../lib/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      autoplay:true,
      slidesPerView: 3,
      spaceBetween: 30,
	  centeredSlides: true,
	  loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
<!-- 北京旅游列表 -->
<a href="" name="bjjd"></a>
<div class="wrap" name="bjjd">
    <div class="content">
        <h2>北京景点</h2>
        <div class="container fluid">
            <div class="row beijing">
  
            </div>
        </div>
    </div>
</div>
<!-- 安徽景点 -->
<a href="" name="ahjd"></a>
<div class="wrap" >
    <div class="content">
        <h2>安徽景点</h2>
        <div class="container fluid">
            <div class="row anhui">
          

            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="../lib/layer/layer.js"></script>
<script src="../lib/ajax.js"></script>
<script src="../lib/cookie.js"></script>
<script src="../js/checkLogin.js"></script>
<script src="../js/index.js"></script>
